<template>
  <div class="content">
    <el-row :gutter="10" class="mb8" v-if="options=='true'">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="operateLife(1)"
        >提升
        </el-button>
        <el-button
          type="info"
          size="mini"
          @click="operateLife(-1)"
        >降级
        </el-button>
      </el-col>
    </el-row>
    <div class="top">
      <h3 style="text-indent: 1em">
        {{ datainfo.title ? datainfo.title : datainfo.name }}-生命周期
      </h3>
      <div class="life-bar">
        <div class="life-box" v-for="(item, index) in list" :key="index">
          <el-button
            :type="
              index < active ? 'success' : index > active ? 'info' : 'primary'
            "
            plain
          >
            <div class="circle">
              <i v-if="index <= active" class="el-icon-check"></i>
            </div>
            {{ item.description }}
          </el-button>
          <div class="divider" v-if="index != list.length - 1"></div>
          <i
            v-if="index != list.length - 1"
            class="el-icon-right"
            style="line-height: 38px; color: #dcdfe6; margin-left: -2px"
          >
          </i>
        </div>
      </div>
    </div>
    <div class="bottom">
      <h3 style="text-indent: 1em">周期详情</h3>
    </div>
  </div>
</template>

<script>
import { getData, promote, demotion } from "@/api/dynamic/dynamic";

export default {
  name: "lifeCycle",
  props: {
    parent: null,
    options: {
      type:String,
      default:'false'},
  },
  data() {
    return {
      list: [],
      active: 0,
      datainfo: {},
    };
  },
  created() {
    this.getDataInfo();
    this.parent.getDataInfo();
  },
  mounted() {
    // this.getList()
  },
  methods: {
    getDataInfo() {
      let type = this.$route.query.type ? this.$route.query.type : "pmswbs";
      if (type.indexOf("pmswbs") > -1) type = "pmswbs";
      getData("/" + type, this.$route.params.Id).then((response) => {
        if (response.code == 200) {
          this.datainfo = response.data;
          this.getList();
        } else {
          this.msgError(response.msg);
        }
      });
    },
    getList() {
      let optionData = JSON.parse(sessionStorage.getItem("optionsData"));
      this.list = optionData["stateOptions"].filter((item) => {
        if (item.policyid == this.datainfo.policyid) return item;
      });
      this.list.sort((a, b) => {
        return a.sort - b.sort;
      });
      this.list.forEach((item, index) => {
        if (this.datainfo.stateid == item.id) {
          this.active = index;
          return;
        }
      });
    },
    operateLife(type) {
      this.$confirm("确认" + (type == 1 ? "提升" : "降级") + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (type == 1) {
            if (this.active == this.list.length - 1) {
              this.msgInfo("已是生命周期最高级");
              return true;
            } else {
              promote({
                id: this.$route.params.Id,
                policyid: this.datainfo.policyid,
              }).then((response) => {
                if (response.code == 200) {
                  this.active++;
                  this.datainfo.stateid = this.list[this.active].id;
                  this.msgSuccess("操作成功");
                  this.parent.getConfig();
                  return true;
                } else {
                  this.msgError("操作出错");
                  return true;
                }
              });
            }
          } else {
            if (this.active == 0) {
              this.msgInfo("已是生命周期最初状态");
              return true;
            } else {
              demotion({
                id: this.$route.params.Id,
                policyid: this.datainfo.policyid,
              }).then((response) => {
                if (response.code == 200) {
                  this.active--;
                  this.datainfo.stateid = this.list[this.active].id;
                  this.msgSuccess(response.msg);
                  this.parent.getConfig();
                  return true;
                } else {
                  this.msgError(response.msg);
                  return true;
                }
              });
            }
          }
        })
        .catch(() => {
          this.msgInfo("已取消");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  .top {
    height: 150px;
    width: 100%;
    border-bottom: 2px solid #ccc;
  }
}
.life-bar {
  width: 100%;
  // height:50%;
  display: flex;
  justify-content: center;
  .life-box {
    width: 180px;
    height: 40px;
    float: left;
    display: flex;
    .circle {
      width: 16px;
      height: 16px;
      font-size: 12px;
      border: solid 2px;
      border-color: inherit;
      border-radius: 50%;
      background: transparent;
      display: inline-block;
      box-sizing: border-box;
      margin-right: 5px;
      margin-bottom: -2px;
    }
    .divider {
      display: inline-block;
      width: 60%;
      height: 0;
      border: 1px solid #dcdfe6;
      margin: 18px 0;
    }
  }
}
</style>
